<template>
	<view class="content">
		<button style="margin-left: 500rpx; " @click="addFatility()">添加设备</button>
		<view class="my-topbg">

			<view class="user-card">
				<view class="my-top">
					<view bindtap="toHome" class="my-head">

						<image mode="aspectFill" src="../../../static/ren.png">
						</image>
					</view>
					<view class="my-top-cell">
						<view class="my-name">
							<view class="pag">
								<u-list>
									<u-list-item>{{DeviceNumber.runsNumber?DeviceNumber.runsNumber:0}} 正在运行
									</u-list-item>
									<u-list-item>{{DeviceNumber.standbyNumber?DeviceNumber.standbyNumber:0}} 待机中
									</u-list-item>
									<u-list-item>{{DeviceNumber.shutdownsNumber?DeviceNumber.shutdownsNumber:0}} 已停机
									</u-list-item>
									<u-list-item>{{DeviceNumber.anomaliesNumber?DeviceNumber.anomaliesNumber:0}} 报警
									</u-list-item>
								</u-list>
							</view>



						</view>

					</view>

				</view>
			</view>
		</view>
		<view class="fix-card">
			<u-tabs ref="tabs" :list="tabs" active-color="#2979ff" inactive-color="#606266" font-size="30"
				:current="current" @click="change"></u-tabs>
		</view>

		<view class="card-bg" v-if="current==0">
			<leo-list :show-icon="true" :show-arrow="true" :list="list"></leo-list>
		</view>
	</view>
</template>

<script>
	import {
		findFacilityList,
		eachDeviceNumber
	} from "@/nxTemp/apis/facility.js"

	let userId = uni.getStorageSync("userId") || 0;
	import leoList from '@/components/leo-list/leo-list.vue'
	export default {
		data() {
			return {
				current: 0,
				pages: 1,
				DeviceNumber: '',
				tabs: [{
					name: '设备列表'
				}, {
					name: '购买机械'
				}, {
					name: '购买农资',
				}],
				list: []
			}
		},

		components: {
			leoList
		},

		mounted() {
			this.facilityList({
				pageNo: this.pages,
				pageSize: 20,
				userId: userId
			})
			this.getDeviceNumber({
				userId: userId
			})
		},
		methods: {
			addFatility: function() {
uni.navigateTo({
					url: '/pages/taBar/fatility/addFatility'
				})
			},
			change: function(e) {

				this.current = e.index;
				this.list = [];
				this.pages = 1;
				this.status = "loading";
				this.isLastPage = false;
				switch (e.index) {

					case 0:
						this.facilityList({
							pageNo: this.pages,
							pageSize: 20,
							"userId": userId
						});
						break;
					case 1:
						this.handleOpenTaobao();
						break;
					case 2:
						this.handleOpenTaobao();
				}
			},
			handleOpenTaobao() {
				// 淘宝的商品链接，换成需要访问的地址
				let url =
					"https://detail.tmall.com/item.htm?spm=a230r.1.14.1.3d4b76f0LV6kFy&id=605165654577&ns=1&abbucket=6";
				let openUrl = url;
				// 因为 url 一般是从其它地方获取的，所以这里要将 http 和 https 删去
				// 也可以直接输入 https:// 之后的内容，则不需要此步判断，直接调用 plus.runtime.openURL
				if (url.substr(0, 5) === 'https') {
					openUrl = `taobao://${url.substr(8)}`;
				} else if (url.substr(0, 4) === 'http') {
					openUrl = `taobao://${url.substr(7)}`;
				}
				plus.runtime.openURL(openUrl, function(res) {
					uni.showModal({
						content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
						success: function(res) {
							if (res.confirm) {
								plus.runtime.openURL(url);
							}
						}
					});
				});
			},
			facilityList: function(ars) {
				findFacilityList(ars).then(res => {
					this.list = res.records;
				})
			},
			getDeviceNumber: function(ars) {
				eachDeviceNumber(ars).then(res => {
					this.DeviceNumber = res;
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f4f6f6;
	}




	.card-bg {
		margin: 24rpx 24rpx;
		padding: 24rpx 32rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 4rpx 20rpx 0rpx rgba(235, 241, 244, 0.35);
	}

	.my-topbg {
		position: relative;
		background: linear-gradient(136deg, #ebfcfa, #f4f6f6);
		padding-bottom: 100rpx;
		margin-bottom: -100rpx;



		.my-top {
			padding: 80rpx 0 40rpx 35rpx;
			margin-bottom: 20rpx;
			position: relative;
			display: flex;
			align-items: center;

			.my-head {
				margin-right: 30rpx;
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 999rem;
					overflow: hidden;
				}
			}

			.pick-code {
				height: 60rpx;
				text-align: center;
				position: relative;
				width: 171rpx;
				background: linear-gradient(311deg, #55aa7f, #5fbf8e);
				font-size: 26rpx;
				color: #f7fffe;
				line-height: 60rpx;
				box-sizing: border-box;
				border-radius: 999rem;
				margin-right: 20rpx;

			}

			.my-top-cell {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;

				.my-name {
					font-size: 42rpx;
					color: #333;
					line-height: 60rpx;
					font-weight: 700;
					display: flex;
					align-items: center;

					.name {
						overflow: hidden;
						white-space: nowrap;
						margin-right: 7rpx;
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					.pag {
						height: 200rpx;
						border-radius: 4rpx;
						padding: 0 8rpx;
						margin-left: 200rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-right: 8rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #000000;
						font-weight: 400;
					}
				}


				.my-post {
					display: flex;
					align-items: center;

					.tag {
						background: #fba117;
						border-radius: 4rpx;
						font-size: 22rpx;
						color: #fff;
						padding: 0 10rpx;
						line-height: 32rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-right: 20rpx;

					}
				}
			}
		}

		.my-other {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.my-hbox {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				flex: 1;

				.item {
					position: relative;
					flex: 1;

					.item-box {
						height: 118rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;

						.cell {
							flex: 1;
							text-align: center;

							.num {
								font-size: 38rpx;
								color: #333;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: 700;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.name {
								font-size: 24rpx;
								color: #a0acaa;
								margin-top: 7rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}


	}

	.fix-card {
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;

		.fix-header {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 30rpx 0;

			.name {
				font-size: 32rpx;
				color: #384645;
				font-weight: 700;
			}

			.actions {
				font-size: 26rpx;
				color: #a0acaa;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.flex-wrp {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 10rpx 0 20rpx;

			.t-item {

				position: relative;
				text-align: center;
				width: 25%;
				padding: 15rpx 0;

				image {
					width: 56rpx;
					height: 56rpx;
					display: block;
					margin: 0 auto;
				}

				text {
					font-size: 26rpx;
					color: #333;
					margin-top: 20rpx;
					display: block;
				}

				.contact {
					position: absolute;
					width: 100%;
					height: 120rpx;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}

		.flex-other {
			flex-direction: column;
			padding: 0;
			display: flex;
			align-items: center;

			.flex-item {
				position: relative;
				padding: 34rpx 26rpx;
				width: 100%;
				box-sizing: border-box;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 30rpx;
					color: #333837;
				}

				.value {
					font-size: 26rpx;
					color: #a0acaa;
					margin-left: auto;
				}


				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	.copyright-footer {
		text-align: center;
		font-size: 24rpx;
		color: #b6b9bb;
		padding: 40rpx 0;
		line-height: 36rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto 8rpx;
		}
	}

	.kefu-justify-center {
		flex-grow: 1;
		flex-direction: column;
		display: flex;
		width: 500rpx;
		height: 700rpx;
		text-align: center;

		.title {
			padding: 20rpx 30rpx;
			font-size: 30rpx;
		}

		.image {
			width: 400rpx;
			margin: 0 auto;

			image {
				width: 400rpx;
			}
		}

		.save {
			width: 200rpx;
			margin: 20rpx auto;
			padding: 20rpx 30rpx;
			border: 1px solid #00aa7f;
			background: #00aa7f;
			border-radius: 5px;
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>
